<template>
  <div class="details">
    <vxe-table border show-overflow="title" :loading="loading" height="400" :data="tableData" :scroll-y="{ enabled: true, gt: 30 }">
      <vxe-column field="paymentBillNumber" title="应付账单号" min-width="140" fixed="left"></vxe-column>
      <vxe-column field="payableStatementNumber" title="代理账单号" min-width="135"> </vxe-column>
      <vxe-column field="agent" title="代理商" min-width="90"> </vxe-column>
      <vxe-column field="statementType" title="账单类型" min-width="90">
        <template #default="{ row }">
          <span v-if="row.statementType === 1">代理对账单</span>
          <span v-if="row.statementType === 2">代理加收单</span>
        </template>
      </vxe-column>
      <vxe-column field="payableAmount" title="导入应付金额" min-width="120"></vxe-column>
      <vxe-column field="surplusPayableAmount" min-width="120" title="剩余应付金额"> </vxe-column>
      <vxe-column field="shipmentCount" title="运单数" min-width="70"></vxe-column>
      <vxe-column field="biller" min-width="70" title="出账人"> </vxe-column>
      <vxe-column field="billTime" title="出账日期" min-width="135">
        <template #default="{ row }">
          {{ dayjs(Number(row.billTime)).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </vxe-column>
      <vxe-column field="updateTime" title="对账日期" min-width="135">
        <template #default="{ row }">
          {{ dayjs(Number(row.updateTime)).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </vxe-column>
      <vxe-column field="status" title="核销状态" min-width="90" fixed="right">
        <template #default="{ row }">
          <a-tag v-if="row.status === 1" color="#cccc"> 未生成账单 </a-tag>
          <a-tag v-if="row.state === 4" color="#2db7f5"> 部分核销 </a-tag>
          <a-tag v-if="row.state === 3" color="#f40"> 待核销 </a-tag>
          <a-tag v-if="row.status === 2" color="#108ee9"> 已生成账单 </a-tag>
          <a-tag v-if="row.status === 5" color="#87d068"> 已核销 </a-tag>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: AgencyBalance.ListRows;
  }>(),
  {}
);
const { visible, passData } = toRefs(props);
const { tableData, init, loading } = InitHook({ passData });
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
  }
);
</script>
<style lang="stylus" scoped>
.details{
    background-color: #fff;
    padding: 12px;
    height: 100%
}
</style>
